<!-- 过户登记列表 -->
<!-- 过户登记列表 -->
<!-- 过户登记列表 -->

<template>
  <div>
    <myDivider name="过户登记"></myDivider>

    <!-- 顶部搜索 -->
    <div class="top">
      <el-date-picker @change="SouSuo" value-format="yyyy-MM-dd" style="width: 250px;" v-model="typeTime"
        type="daterange" unlink-panels :range-separator="null" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-cascader clearable style="width: 300px;" v-model="keyRoom" :props="keyRoomProps"
        @change="keyRoomChange"></el-cascader>
      <el-input style="width: 140px;" v-model="keyName" placeholder="输入姓名查询"></el-input>
      <el-button type="primary" @click="SouSuo">搜索</el-button>
      <el-button @click="reset">重置</el-button>
      <div class="add" style="margin-top: 10px;">
        <el-button type="primary" @click="AddClick">新增</el-button>
      </div>
    </div>

    <!-- 表格列表 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="residentialName" label="社区名称">
        </el-table-column>
        <el-table-column align="center" prop="roomInfo" label="房间信息">
        </el-table-column>
        <el-table-column align="center" prop="oldOwnerName" label="原业主姓名" width="180">
        </el-table-column>
        <el-table-column align="center" prop="newOwnerName" label="新业主姓名" width="180">
        </el-table-column>
        <el-table-column align="center" prop="ownershipName" label="房屋归属" width="130">
        </el-table-column>
        <el-table-column align="center" prop="createUserName" label="经办人" width="120">
        </el-table-column>
        <el-table-column align="center" prop="createTimeStr" label="归档日期" width="120">
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <!-- <div style="display: flex;margin-top: 10px;justify-content: space-between;">
              <el-button size="small" icon="el-icon-document" @click="detailClick(scope.row)"
                type="primary">详情</el-button>
              <el-button size="small" icon="el-icon-edit" @click="updateClick(scope.row)" type="success">修改</el-button>
            </div> -->
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="12">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="detailClick(scope.row)">详情</span>
                </el-col>
                <el-col class="el" :span="12">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="updateClick(scope.row)">修改</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="roomName" label="房间信息" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roomName" placement="top-start">
              <span> {{
                scope.row.roomName.length > 8 ? '...' + scope.row.roomName.slice(scope.row.roomName.length - 8) :
                scope.row.roomName
              }}</span>
            </el-tooltip>
          </template> 
        </el-table-column> -->
      </el-table>
    </div>

    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
    <!-- 所有弹窗 -->

  </div>
</template>

<script>
import axios from 'axios'
export default {

  data() {
    return {
      keyRoomProps: { //房间级联选择器配置 
        value: 'id',
        label: 'name',
        checkStrictly: true,
        lazy: true,
        lazyLoad: async (node, resolve) => {
          console.log(node, '级联选择器');
          const { level } = node;
          if (level == 0) {
            let res = await this.$api.events.getCellList(
              {
                name: '',
                pageNum: 1,
                pageSize: 10000,
                roleIds: this.logOnUser.roleIds
              })
            if (res.code == 200) {
              console.log(res.data.list, 'ahhh');
              resolve(res.data.list)

            } else {
              this.$message.error(res.message)
            }
          } else if (level == 1) {
            // 获取楼宇列表
            let res = await this.$api.events.getBuildingList({
              "residentialQuartersId": node.path[0]
            })
            if (res.code == 200) {
              resolve(res.data.list)
            } else {
              this.$message.error(res.message)
            }
          } else if (level == 2) { //获取单元列表
            let res = await this.$api.axios.post('/business/room/getUnitCodeListByBuildingId', {
              "buildingId": node.path[1]
            })
            if (res) {
              let arr = []
              res.data.forEach(el => {
                arr.push({
                  name: el.name,
                  id: el.value,
                })
              })
              resolve(arr)
            }
          } else if (level == 3) { //获取楼层
            let res = await this.$api.axios.post('/business/room/getFloorsListByBuildingId', {
              "buildingId": node.path[1], //楼宇id  必填
              "unitCode": node.path[2]
            })
            if (res) {
              let arr = []
              res.data.forEach(el => {
                arr.push({
                  name: el.name,
                  id: el.value,
                })
              })
              resolve(arr)
            }
          } else if (level == 4) {
            let res = await this.$api.axios.post('/business/room/getRoomListByFloors', {
              "buildingId": node.path[1], //楼宇id  必填
              "unitCode": node.path[2],
              "floors": node.path[3] //楼层  必填
            })
            if (res) {
              if (res.data.length > 0) {
                let arr = []
                res.data.forEach(el => {
                  arr.push({ ...el, leaf: true })
                })
                resolve(arr)
              } else {
                resolve([{
                  name: '暂无房间',
                  id: 0,
                  disabled: true,
                  leaf: true
                }])
              }

            }
          }else{
            resolve()
          }

        }
      },
      typeTime: [],
      keyRoom: [],
      keyName: '',
      keyRoomOptions: [],
      // 分页器
      total: 1,
      pageNum: 1,
      pageSize: 10,
      tableData: [{ roomInfo: 1 }],
      logOnUser: {},
    }
  },
  async activated() {
    this.logOnUser = sessionStorage.getItem('logOnUser')
    this.typeTime = []
    this.keyRoom = []
    this.keyName = ''
    this.getTableList()

  },
  deactivated() {

  },
  methods: {

    AddClick() {
      this.$router.push('/Transfer/TransferAdd?scene=add')
    },
    updateClick(row) {
      this.$router.push(`/Transfer/TransferAdd?scene=update&id=${row.id}`)
    },
    detailClick(row) {
      this.$router.push(`/Transfer/TransferDetail?id=${row.id}`)
    },



    async getTableList() { // 获取表格列表
      if (this.typeTime == null) {
        this.typeTime = ['', '']
      }
      let residentialId
      let buildingId
      let unitCode
      let floors
      let roomId
      if (this.keyRoom.length == 0) {
        residentialId = 0
        buildingId = 0
        unitCode = ''
        floors = ''
        roomId = 0
      }
      if (this.keyRoom.length == 1) {
        residentialId = this.keyRoom[0]
        buildingId = 0
        unitCode = ''
        floors = ''
        roomId = 0
      }
      if (this.keyRoom.length == 2) {
        residentialId = this.keyRoom[0]
        buildingId = this.keyRoom[1]
        unitCode = ''
        floors = ''
        roomId = 0
      }
      if (this.keyRoom.length == 3) {
        residentialId = this.keyRoom[0]
        buildingId = this.keyRoom[1]
        unitCode = this.keyRoom[2]
        floors = ''
        roomId = 0
      }
      if (this.keyRoom.length == 4) {
        residentialId = this.keyRoom[0]
        buildingId = this.keyRoom[1]
        unitCode = this.keyRoom[2]
        floors = this.keyRoom[3]
        roomId = 0
      }
      if (this.keyRoom.length == 5) {
        residentialId = this.keyRoom[0]
        buildingId = this.keyRoom[1]
        unitCode = this.keyRoom[2]
        floors = this.keyRoom[3]
        roomId = this.keyRoom[4]
      }
      let userData = JSON.parse(sessionStorage.getItem('logOnUser'))
      let res = await this.$api.customer.myTransferOwnershipList({
        "unitType": userData.unitType, //机构company 系统 system
        "unitId": userData.unitId, //系统传0
        "residentialId": residentialId, //没有传0
        "buildingId": buildingId, //没有传0
        "roomId": roomId, //没有传0
        unitCode:unitCode,
        floors:floors,
        "timeStart": this.typeTime[0], //起始时间
        "timeEnd": this.typeTime[1], //结束时间
        "keywords": this.keyName, //原业主姓名  或  新业主姓名
        "pageSize": this.pageSize,
        "pageNum": this.pageNum
      })
      if (res.data.list.length < 1 && this.pageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
        this.pageNum = 1
        this.getTableList()
        return
      }
      this.tableData = res.data.list
      this.total = res.data.total
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.keyRoom = []
      this.typeTime = ['', '']
      this.keyName = ''
      this.pageNum = 1
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    keyRoomChange(val) {
      this.SouSuo()
      if (val.length == 0) return
      this.$nextTick(() => {
        const dom = document.getElementsByClassName("el-radio is-checked");
        //这里我把dom打出来看了 最后一个选项才是我选中的节点 即[length-1] 有的博主写的是 第一个元素 即[0] 大家自行尝试
        let radioDom = dom[dom.length - 1];
        const brother = radioDom.nextElementSibling;
        brother.click();
      });

    },
  },
}
</script>

<style lang="less" scoped>
.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.width1 {
  width: 200px;
}



.top {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  position: relative;


}




.tableBox {
  margin-top: 50px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {}
    }
  }

}
</style>